<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>血型计算器</title>
    <style>
    body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center; /* 将内容水平居中 */
            align-items: center; /* 将内容垂直居中 */
            height: 100vh; /* 设置高度为视口的高度 */
            background-image: url("img/6.webp");
            background-size: 100%; /* 背景图片大小 */
            background-position: center; /* 背景图片位置 */
        }
    .container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    h1 {
        text-align: center;
        color: #5a5a5a;
    }
    label {
        display: block;
        margin: 10px 0 5px;
        font-weight: bold;
    }
    select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
    }
    button {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    button:hover {
        background-color: #007bff;
    }
    #result {
        margin-top: 20px;
        padding: 10px;
        background-color: #e9ecef;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
    }
    a {
        display: block;
        text-align: center;
        margin-top: 20px;
        color: #007bff;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    p{
        text-align: center;
    }
</style>

    <script>
        function chakanjieguo() {
            let xx1 = document.querySelector("#xuexing1").value;
            let xx2 = document.querySelector("#xuexing2").value;
            let result = ""; // 孩子ABO血型计算器
            
            if (xx1 == "A" && xx2 == "A") {
    result = "你孩子的血型是A型或者是O型";
} else if (xx1 == "A" && xx2 == "B" || xx1 == "B" && xx2 == "A") {
    result = "你孩子的血型是AB型或者是B型或A型或O型";
} else if (xx1 == "A" && xx2 == "AB" || xx1 == "AB" && xx2 == "A") {
    result = "你孩子的血型是AB型或者是B型或A型";
} else if (xx1 == "A" && xx2 == "O" || xx1 == "O" && xx2 == "A") {
    result = "你孩子的血型是A型或者是O型";
} else if (xx1 == "B" && xx2 == "B") {
    result = "你孩子的血型是B型或O型";
} else if (xx1 == "B" && xx2 == "AB" || xx1 == "AB" && xx2 == "B") {
    result = "你孩子的血型是AB型或B型或A型";
} else if (xx1 == "B" && xx2 == "O" || xx1 == "O" && xx2 == "B") {
    result = "你孩子的血型是B型或O型";
} else if (xx1 == "AB" && xx2 == "AB") {
    result = "你孩子的血型是AB型";
} else if (xx1 == "O" && xx2 == "O") {
    result = "你孩子的血型是O型";
} else if (xx1 == "AB" && xx2 == "O" || xx1 == "O" && xx2 == "AB") {
    result = "你孩子的血型是A型或B型"; 
} else {
                result = "输入错误，请选择有效的血型";
            }
            document.querySelector("#result").innerHTML = result; // 显示结果到页面
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>血型计算器</h1>
        <label for="xuexing1">你的父亲的血型是：</label>
        <select id="xuexing1">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="AB">AB</option>
            <option value="O">O</option>
        </select><br>
        <label for="xuexing2">你的母亲的血型是：</label>
        <select id="xuexing2">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="AB">AB</option>
            <option value="O">O</option>
        </select><br>
        <button onclick="chakanjieguo()">计算</button>
        <p id="result"></p>
        <p><a href="ceshihe.html">点击返回首页</a></p>
    <p>© 2024 周露航</p>
    </div>
    
</body>
</html>
